<template>
    <div>
        <div class="pos left-side" @touchstart.stop="handleStart" @touchend.stop="handleEnd" ></div>
        <div class="pos right-side" @touchstart.stop="handleStart" @touchend.stop="handleEnd" ></div>
    </div>
</template>

<script>
export default {
  name: 'sideslip',
  data() {
    return {
      startPosX: 0,
      offset: 50,
      direction: 'left',
      windowWidth: ''

    }
  },
  methods: {
    platform() {
      let agent =navigator.userAgent
      if (agent.indexOf('Android')!=-1 || agent.indexOf('iPhone')!=-1 || agent.indexOf('iPad')!=-1) {
        return 'phone';
      } else {
        return '';
      }
    },
    handleStart() {
      if (!e.touches) {
        return;
      }
      this.startPosX = e.touches[0].clientX;
      this.direction = this.startPosX > this.windowWidth / 2 ? 'right' : 'left';

    },
    handleEnd() {
      if (!e.changedTouches || !e.changedTouches[0]) {
        return;
      }
      let x = e.changedTouches[0].clientX;
      const offset = x - this.startPosX;
      const canDrag = (this.direction == 'left' && offset >= this.offset) || (this.direction == 'right' && offset <= -this.offset);
      if (canDrag) {
        this.startPosX = 0;

      }
    }
  }
}
</script>

<style scoped>
    .pos {
        position: fixed;
        top: 0;
        bottom: 0;
        width: 40px;
        opacity: 0.01;
        background-color: transparent;
    }
    .left-side {
        left: 0;
    }
    .right-side {

        right: 0;
    }
</style>
